<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>d3-downloadable Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.css"/>
</head>
<body>
<div class="container">
  <h1>d3-downloadable Example</h1>
  <p>Right click to download SVG</p>
  <div class="row">
    <div class="col-xs-8" style="height:600px;">
      <svg id="chart">
        <defs>
          <style>
            .nvd3 .nv-axis .nv-axisMaxMin text {
              font-weight: 700;
            }
            svg text {
              font: 400 12px Arial;
            }
            .nvd3 .nv-axis path {
              fill: none;
              stroke: #000;
              stroke-opacity: .75;
              shape-rendering: crispEdges;
            }
            .nvd3 .nv-axis path.domain {
              stroke-opacity: .75;
            }
            .nvd3 .nv-legend .disabled circle {
              fill-opacity: 0;
            }
            .nvd3 .nv-axis line {
              fill: none;
              stroke: #e5e5e5;
              shape-rendering: crispEdges;
            }
          </style>
        </defs>
      </svg>
    </div>
  </div>
  <pre id="code"></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.js"></script>
<script src="d3-downloadable.js"></script>
<script>
var data = [
  {key: 'A', values: [
    {x: 0, y:70},
    {x: 1, y:76},
    {x: 2, y:50},
    {x: 3, y:99},
    {x: 4, y:69},
    {x: 5, y:51},
    {x: 6, y:55},
    {x: 7, y:6},
    {x: 8, y:50},
    {x: 9, y:71}
  ]},
  {key: 'B', values: [
    {x: 0, y:83},
    {x: 1, y:32},
    {x: 2, y:37},
    {x: 3, y:21},
    {x: 4, y:20},
    {x: 5, y:75},
    {x: 6, y:98},
    {x: 7, y:50},
    {x: 8, y:77},
    {x: 9, y:64}
  ]},
  {key: 'C', values: [
    {x: 0, y:95},
    {x: 1, y:17},
    {x: 2, y:63},
    {x: 3, y:33},
    {x: 4, y:29},
    {x: 5, y:59},
    {x: 6, y:50},
    {x: 7, y:82},
    {x: 8, y:31},
    {x: 9, y:98}
  ]}
];
function draw() {
  nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .duration(350)
      .reduceXTicks(true)
      .rotateLabels(0)
      .showControls(true)
      .groupSpacing(0.1)

    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    var dl = downloadable()
      .filename('chart');

    d3.select('svg#chart')
      .datum(data)
      .call(chart)
      .call(dl);

    nv.utils.windowResize(chart.update);

    return chart;
  });
}

d3.select('pre#code')
  .text(draw.toString());

draw();
</script>
</body>
</html>
